<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俊哥·鉴 - 千秋纪</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/timeline.css">
</head>
<body>
    <nav class="main-nav">
        <a href="index.html">首页</a>
        <a href="about.html">人物志</a>
        <a href="portfolio.html">学业坊</a>
        <a href="timeline.html" class="active">千秋纪</a>
        <a href="guestbook.html">访客阁</a>
    </nav>

    <main class="content-wrapper timeline-page">
        <header class="page-header">
            <h1 class="section-title">千秋纪</h1>
            <p class="section-subtitle">以时间为轴，镌刻成长足迹，串联生命中的每一个闪光时刻。</p>
        </header>

        <section class="timeline-container">
            <div class="timeline-scroll">
                <!-- Timeline events will be dynamically inserted here -->
                <div class="timeline-event">
                    <div class="event-date">2023</div>
                    <div class="event-milestone"></div>
                    <div class="event-description">
                        <h3>唐风CSS设计</h3>
                        <p>完成一个以唐代美学为灵感的前端项目。</p>
                    </div>
                </div>
                <!-- More events... -->
            </div>
        </section>
        
        <section class="achievements-section">
            <h2 class="section-title">博古架</h2>
            <div class="badge-shelf">
                <div class="badge-shelf-bg"><canvas id="badgeParticles"></canvas></div>
                <!-- Achievement badges will be displayed here -->
                <div class="badge-item">
                    <img src="assets/images/badge-tiger-tally.png" alt="虎符徽章">
                    <p>项目能手</p>
                </div>
                 <div class="badge-item">
                    <img src="assets/images/badge-jade-cong.png" alt="玉琮徽章">
                    <p>代码工匠</p>
                </div>
                <!-- More badges... -->
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <p>
            &copy; 2025 俊哥·鉴
        </p>
    </footer>

    <script src="js/data.js"></script>
    <script src="js/timeline.js"></script>
</body>
</html> 